<template>

    <section class="about" id="about">
        <div class="image">
            <img src="@/assets/image/about.png">
        </div>
        <div class="content">
            <h3>网站介绍</h3>
            <p>欢迎来到acming旅游网站我们相信每个人都有探索世界的梦想。无论您是渴望体验异国风情，还是希望在大自然中寻找内心的平静，我们都致力于帮助您实现这些梦想。
                我们的愿景是成为全球旅行者的首选平台，为您提供最全面、最详细、最可靠的旅游信息和服务。我们希望通过我们的努力，让您的每一次旅行都充满惊喜和快乐。
                我们的团队由经验丰富的旅行专家、当地向导和旅行爱好者组成，确保您获得最权威和最新的旅行信息。旅行者们可以互相交流、分享旅行经验和故事，结识志同道合的朋友。通过我们的博客、论坛和社交媒体，您可以获取第一手的旅行资讯，参与各种有趣的话题讨论，分享您的旅途见闻
            </p>
            <a class="btn" @click="handleClick">read more</a>
        </div>
    </section>

</template>


<script setup>
import { useRouter } from 'vue-router'

const $router = useRouter()
const handleClick = () => {
    $router.push({
        path: '/layout/about'
    })
}

</script>


<style lang="scss" scoped>
section {
    padding: 2rem 10%;
}

.about {
    background: #F0F0F0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;

}

.about .image {
    flex: 1 1 42rem;
    height: auto;
    padding-right: 5rem;
    padding-bottom: 5rem;
}

.about .image img {
    width: 100%;
    height: 100%;
    box-shadow: 4rem 4rem 0 rgba(0, 0, 0, 0.2);
}

.about .content {
    flex: 1 1 40rem;
    // height: 50rem;
}

.about .content .btn {
    border: .2rem solid #222;
    display: inline-block;
    cursor: pointer;
    margin-top: 1rem;
    padding: 1rem 2rem;
    background: none;
    font-size: 1.6rem;
    color: black;
}

.about .content .btn:hover {
    background: black;
    color: white;
}

.about .content h3 {
    font-size: 3.5rem;
    color: green;
}

.about .content p {
    font-size: 2rem;
    padding: 1rem 0;
    line-height: 2.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
    text-overflow: ellipsis;
}


@media(max-width:991px) {
    html {
        font-size: 55%;
        scroll-padding-top: 7rem;
    }
}
</style>